<template>
  <div>
    <div class="chart">
      <div ref="seven" style="height:150px"></div>
      <div ref="total" style="height:150px"></div>
      <div ref="top" style="height:150px"></div>
    </div>
    <div class="btn">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item>
          <el-input clearable v-model="form.fuzzy_plate" placeholder="请输入车牌号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select clearable v-model="form.status" placeholder="请选择车牌状态">
            <el-option label="注册" value="1"></el-option>
            <el-option label="未注册" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker clearable value-format="timestamp" v-model="time" type="daterange" align="right" unlink-panels
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table :data="rData" style="width: 100%">
        <el-table-column label="序号" type="index" :index="1">
        </el-table-column>
        <el-table-column prop="result" label="识别结果" align="center">
        </el-table-column>
        <el-table-column prop="image_path" label="识别图片" align="center">
        </el-table-column>
        <el-table-column prop="recognition_time" label="识别时间" align="center">
        </el-table-column>
        <el-table-column label="识别状态" align="center">
          <template v-slot="scope">
            <div>
              <el-tag :type="scope.row.status === 0 ? 'danger' : 'success'">{{ scope.row.status === 0 ? '未注册' : '注册'
              }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="scope">
            <div>
              <el-tag @click="toEdit(scope.row)" type="primary" style="margin-right:15px">修改</el-tag>
              <el-tag @click="toDelete(scope.row.id)" type="danger">删除</el-tag>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page" style="margin-top:15px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.page"
        :page-sizes="[5, 10, 15, 20]" :page-size="params.page_size" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog title="更新识别记录" :visible.sync="visible">
      <el-form ref="diaForm" :rules="rules" :model="diaForm">
        <el-form-item clearable prop="result" label="识别结果" :label-width="formLabelWidth">
          <el-input key="diaForm" v-model="diaForm.result" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="status" label="识别状态" :label-width="formLabelWidth">
          <el-select key="diaForm" clearable v-model="diaForm.status" placeholder="请选择识别状态">
            <el-option label="注册" value="1"></el-option>
            <el-option label="未注册" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { get, Delete, put } from '@/utils/request';
import { Area, Pie, Bar } from '@antv/g2plot';
export default {
  data() {
    return {
      form: {},
      rData: [],
      time: [],
      topData: [],
      formLabelWidth: '120px',
      rules: {
        result: [
          { required: true, message: '请输入识别结果', trigger: 'blue' }
        ],
        status: [
          { required: true, message: '请选择识别状态', trigger: 'change' }
        ]
      },
      diaForm: {
        result: '',
        status: 0
      },
      id: 0,
      visible: false,
      params: {
        page: 1,
        page_size: 5
      },
      total: 0,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  async mounted() {
    await this.getPie();
    this.loadSeven();
    this.loadPie();
    this.loadTop();
    this.getCarData()
  },
  methods: {
    submit() {
      this.$refs.diaForm.validate(async valid => {
        if (valid) {
          let res = await put(`/car/car-records-detail/${this.id}/`, this.diaForm);
          this.$message({
            type: 'success',
            message: res.message
          });
          this.visible = false;
          this.getCarData();
        }
      })
    },
    toEdit(row) {
      this.visible = true;
      let temp = {};
      temp = { ...row };
      this.diaForm.result = temp.result;
      this.diaForm.status = Number(temp.status);
      this.id = row.id;
    },
    toDelete(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await Delete(`/car/car-records-detail/${id}/`);
        console.log(res);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.params.page = 1;
        this.getCarData();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    async getPie() {
      let res = await get('/face/chart/face_recognition_total_stats/');
      this.topData = res.data;
    },
    loadTop() {
      const bar = new Bar(this.$refs.top, {
        data: [
          { year: 'top1', value: 38 },
          { year: 'top2', value: 52 },
          { year: 'top3', value: 61 },
          { year: 'top4', value: 145 },
          { year: 'top5', value: 48 },
        ],
        xField: 'value',
        yField: 'year',
        seriesField: 'year',
        legend: {
          position: 'top-left',
        },
      });
      bar.render();
    },
    loadPie() {
      const piePlot = new Pie(this.$refs.total, {
        appendPadding: 10,
        data: this.topData,
        angleField: 'value',
        colorField: 'name',
        radius: 0.9,
        label: {
          type: 'outer',
          offset: '-30%',
          style: {
            fontSize: 14,
            textAlign: 'center',
          },
        },
        interactions: [{ type: 'element-active' }],
      });

      piePlot.render();
    },
    loadSeven() {
      const area = new Area(this.$refs.seven, {
        data: [
          {
            "timePeriod": "2022 Q3",
            "value": 1
          },
          {
            "timePeriod": "2023 Q4",
            "value": 1.08
          },
          {
            "timePeriod": "2023 Q1",
            "value": 1.17
          },
          {
            "timePeriod": "2023 Q2",
            "value": 1.26
          },
          {
            "timePeriod": "2023 Q3",
            "value": 1.34
          },
          {
            "timePeriod": "2024 Q4",
            "value": 1.41
          }],
        xField: 'timePeriod',
        yField: 'value',
        xAxis: {
          range: [0, 1],
        },
      });
      area.render();
    },
    async getCarData() {
      if (this.time) {
        this.form.start_time = Math.floor(this.time[0] / 1000);
        this.form.end_time = Math.floor(this.time[1] / 1000)
      } else {
        delete this.form.start_time;
        delete this.form.end_time;
      }
      let temp = {
        ...this.form,
        ...this.params
      }
      for (let key in temp) {
        if (!temp[key]) {
          delete temp[key]
        }
      }
      let res = await get('/car/car-records-list/', temp);
      this.rData = res.data;
      this.total = res.pagination.total;
    },
    toSearch() {
      this.params.page = 1;
      this.getCarData()
    },
    handleSizeChange(pageSize) {
      this.params.page = 1;
      this.params.page_size = pageSize;
      this.getCarData()
    },
    handleCurrentChange(page) {
      this.params.page = page;
      this.getCarData()
    }
  },
  created() {
    // this.getCarData()
  }
}
</script>
<style lang="scss" scoped>
.chart {
  height: 200px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;

  &>div {
    flex: 1;
    margin-right: 20px;
  }
}
</style>